<template>
  <div>
    <!-- 查看弹窗 -->
    <div class="s_shadow" v-if="showFlag">
      <div class="s_shadow_a">
        <h3 class="list1_title title_b">
          <img src="@/assets/images/shu_03.jpg" alt />
          <span class="title_text">项目公司人员考勤详情</span>
          <img class="closeshadow" @click="close1" src="@/assets/images/fill-closed.png" alt />
        </h3>
        <div style="width:100%;height:90%;overflow-x: hidden;">
          <div class="inputBox">
            <div class="lable_a">姓名:</div>
            <el-input v-model="rowData.nameOfPerson" placeholder readonly="true"></el-input>
          </div>
          <div class="inputBox">
            <div class="lable_a">到岗情况:</div>
            <el-input v-model="rowData.isWork" placeholder readonly="true"></el-input>
          </div>
          <div class="inputBox">
            <div class="lable_a">居住地:</div>
            <el-input v-model="rowData.home" placeholder readonly="true"></el-input>
          </div>
          <div class="inputBox">
            <div class="lable_a">抵达工作地点方式:</div>
            <el-input v-model="rowData.trafficTools" placeholder readonly="true"></el-input>
          </div>
          <div class="inputBox">
            <div class="lable_a">车次:</div>
            <el-input v-model="rowData.trainNum" placeholder readonly="true"></el-input>
          </div>
          <div class="inputBox">
            <div class="lable_a">乘车日期:</div>
            <el-input v-model="rowData.dateOfRide" placeholder readonly="true"></el-input>
          </div>
          <div class="inputBox">
            <div class="lable_a">抵达工作地日期:</div>
            <el-input v-model="rowData.arrivalDate" placeholder readonly="true"></el-input>
          </div>
          <div class="inputBox">
            <div class="lable_a">当日体温:</div>
            <el-input v-model="rowData.temperature" placeholder readonly="true"></el-input>
          </div>
          <div class="inputBox">
            <div class="lable_a">口罩佩戴情况:</div>
            <el-input v-model="rowData.isMask" placeholder readonly="true"></el-input>
          </div>
          <div class="inputBox">
            <div class="lable_a">个人健康情况:</div>
            <el-input v-model="rowData.personalHealth" placeholder readonly="true"></el-input>
          </div>
          <div class="inputBox">
            <div class="lable_a">是否与疑似或确诊病人接触:</div>
            <el-input v-model="rowData.perContact" placeholder readonly="true"></el-input>
          </div>
          <div class="inputBox">
            <div class="lable_a">家庭成员健康状况:</div>
            <el-input v-model="rowData.homeHealth" placeholder readonly="true"></el-input>
          </div>
          <div class="inputBox">
            <div class="lable_a">家庭成员是否与疑似或确诊病人接触:</div>
            <el-input v-model="rowData.homeContact" placeholder readonly="true"></el-input>
          </div>
          <div class="inputBox">
            <div class="lable_a">个人冠状病毒诊断结果:</div>
            <el-input v-model="rowData.perResult" placeholder readonly="true"></el-input>
          </div>
          <div class="inputBox">
            <div class="lable_a">家庭成员冠状病毒诊断结果:</div>
            <el-input v-model="rowData.homeResult" placeholder readonly="true"></el-input>
          </div>
          <div class="inputBox">
            <div class="lable_a">隔离情况:</div>
            <el-input v-model="rowData.isQuarantine" placeholder readonly="true"></el-input>
          </div>
          <div class="inputBox">
            <div class="lable_a">创建人:</div>
            <el-input v-model="rowData.nameOfPerson" placeholder readonly="true"></el-input>
          </div>
          <div class="inputBox">
            <div class="lable_a">创建时间:</div>
            <el-input v-model="rowData.createTime" placeholder readonly="true"></el-input>
          </div>
          <div class="inputBox">
            <div class="lable_a">更新人:</div>
            <el-input v-model="rowData.nameOfUpUser" placeholder readonly="true"></el-input>
          </div>
          <div class="inputBox">
            <div class="lable_a">更新时间:</div>
            <el-input v-model="rowData.upTime" placeholder readonly="true"></el-input>
          </div>
        </div>
      </div>
    </div>

    <h3 class="list1_title">
      <img src="@/assets/images/shu_03.jpg" alt />
      <span class="title_text">项目公司人员考勤详情</span>
    </h3>
    <div class="find_a">
      <div class="findbtn" @click="findList">查询</div>
      <!-- <div class="name">
        <span>查询:</span>
      </div> -->
      <div class="name_input name_input1">
        <el-select v-model="childId" clearable placeholder="选择子项目">
          <el-option
            v-for="item in child"
            :key="item.id"
            :label="item.subProjName"
            :value="item.id"
          ></el-option>
        </el-select>
      </div>
      <!-- <div class="name">
        <span>姓名:</span>
      </div>-->
      <div class="name_input name_input1">
        <el-input v-model="findinput" placeholder="姓名"></el-input>
      </div>
      <!-- <div class="name">
        <span>到岗情况:</span>
      </div>-->
      <div class="name_input name_input1">
        <el-select v-model="isworkType" clearable placeholder="到岗情况">
          <el-option
            v-for="item in iswork"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <!-- <div class="name">
        <span>健康状况:</span>
      </div>-->
      <div class="name_input name_input1">
        <el-input v-model="personalHealth" placeholder="健康状况"></el-input>
      </div>
      <!-- <div class="name">
        <span>填报时间:</span>
      </div>-->
      <div class="name_input">
        <el-date-picker
          v-model="Time"
          type="daterange"
          range-separator="至"
          start-placeholder="填报日期"
          end-placeholder="填报日期"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
      </div>
    </div>
    <div class="table_content">
      <el-table
        :header-cell-style="{ fontWeight: 500 }"
        :data="tableData"
        stripe
        style="width: 100%;"
        @row-click="rowinfo"
      >
        <!-- <el-table-column align="center" type="index" label="序号" width="90"></el-table-column> -->
        <el-table-column align="center" prop="parentProjName" label="父项目名称"></el-table-column>
        <el-table-column align="center" prop="subProjName" label="子项目名称"></el-table-column>
        <el-table-column align="center" prop="nameOfPerson" label="姓名" min-width="70"></el-table-column>
        <el-table-column align="center" prop="isMask" label="到岗情况" min-width="80"></el-table-column>
        <el-table-column align="center" prop="home" label="居住地"></el-table-column>
        <el-table-column align="center" prop="trafficTools" label="抵达工作地点方式" width="180"></el-table-column>
        <el-table-column align="center" prop="arrivalDate" label="抵达工作地点时间" width="180"></el-table-column>
        <!-- <el-table-column align="center" prop="userId" label="填报人" width="90"></el-table-column> -->
        <el-table-column align="center" prop="createTime" label="填报时间" min-width="180"></el-table-column>
        <el-table-column align="center" label="操作" min-width="90">
          <template>
            <img @click="showInfo" src="@/assets/images/fill-view.png" />
            <!-- <img src="@/assets/images/edit.png" />
            <img src="@/assets/images/remove.png" />-->
          </template>
        </el-table-column>
      </el-table>
      <div class="fenye" style="float:right;position: relative;right: 0;top: 5px;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
@import "@/style/epidemicrisk/list1.scss";
</style>
<script>
import { projectkaoqin, findchildlist } from "@/service/epidemicrisk/index.js";
export default {
  data() {
    return {
      showFlag: false,
      Time: [],
      //查询条件
      isworkType: "",
      findinput: "",
      childId: "",
      personalHealth: "",
      start: "",
      end: "",
      //查询下拉
      child: [],
      iswork: [
        { value: "正常到岗", label: "正常到岗" },
        { value: "请假", label: "请假" },
        { value: "调休", label: "调休" },
        { value: "隔离", label: "隔离" }
      ],
      rowData: {},
      //当前页
      currentPage: 1,
      total: 0,
      tableData: []
    };
  },
  // updated() {
  //   window.console.log(this.isworkType);
  //   window.console.log(this.Time);
  // },
  created() {
    var currentPage = this.currentPage;
    var pageSize = 10;
    var userId = window.sessionStorage.getItem("id");
    var end = this.end;
    var start = this.start;
    var iswork = this.isworkType;
    var name = this.findinput;
    var personalHealth = this.personalHealth;
    var subProjectId = this.childId;
    var params = {
      currentPage: currentPage,
      pageSize: pageSize
    };
    //生成列表
    projectkaoqin(
      params,
      userId,
      end,
      start,
      iswork,
      name,
      personalHealth,
      subProjectId
    ).then(res => {
      window.console.log(res.data.msg);
      this.total = res.data.obj.total;
      this.tableData = res.data.obj.rows;
    });

    //子项目下拉
    findchildlist(userId).then(res => {
      // window.console.log(res);
      this.child = res.data.obj;
    });
  },
  methods: {
    //查询
    findList() {
      if (this.Time === null) {
        this.start = "";
        this.end = "";
        var start = this.start;
        var end = this.end;
      } else if (this.Time.length == false) {
        this.start = "";
        this.end = "";
        start = this.start;
        end = this.end;
      } else {
        this.start = this.Time[0];
        this.end = this.Time[1];
        start = this.start;
        end = this.end;
        if (start == end) {
          this.$message({
            message: "查询起止日期不能相等",
            type: "error"
          });
          return false;
        }
      }

      var currentPage = 1;
      var pageSize = 10;
      var userId = window.sessionStorage.getItem("id");

      var iswork = this.isworkType;
      var name = this.findinput;
      var personalHealth = this.personalHealth;
      var subProjectId = this.childId;
      var params = {
        currentPage: currentPage,
        pageSize: pageSize
      };
      projectkaoqin(
        params,
        userId,
        end,
        start,
        iswork,
        name,
        personalHealth,
        subProjectId
      ).then(res => {
        // window.console.log(res.data.msg);
        if (res.data.status == 500) {
          this.$message({
            message: "查询失败",
            type: "error"
          });
        }
        this.total = res.data.obj.total;
        this.tableData = res.data.obj.rows;
      });
    },

    handleSizeChange(val) {
      window.console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      //翻页
      // window.console.log(`当前页: ${val}`);
      if (this.Time === null) {
        this.start = "";
        this.end = "";
        var start = this.start;
        var end = this.end;
      } else if (this.Time.length == false) {
        this.start = "";
        this.end = "";
        start = this.start;
        end = this.end;
      } else {
        this.start = this.Time[0];
        this.end = this.Time[1];
        start = this.start;
        end = this.end;
        if (start == end) {
          this.$message({
            message: "查询起止日期不能相等",
            type: "error"
          });
          return false;
        }
      }

      var currentPage = val;
      var pageSize = 10;
      var userId = window.sessionStorage.getItem("id");

      var iswork = this.isworkType;
      var name = this.findinput;
      var personalHealth = this.personalHealth;
      var subProjectId = this.childId;
      var params = {
        currentPage: currentPage,
        pageSize: pageSize
      };
      projectkaoqin(
        params,
        userId,
        end,
        start,
        iswork,
        name,
        personalHealth,
        subProjectId
      ).then(res => {
        // window.console.log(res.data.msg);
        if (res.data.status == 500) {
          this.$message({
            message: "查询失败",
            type: "error"
          });
        }
        this.total = res.data.obj.total;
        this.tableData = res.data.obj.rows;
      });
    },
    //获取当前行信息
    rowinfo(row) {
      window.console.log(row);
      this.rowData = row;
    },

    // 打开弹窗
    showInfo() {
      this.showFlag = true;
    },
    update() {
      this.showFlag1 = true;
    },
    //关闭弹窗
    close1() {
      this.showFlag = false;
      this.showFlag1 = false;
    }
  }
};
</script>
